<template>
<div class="xs-echarts-threer" id="threer"></div>
</template>

<script>
import echarts from "echarts";

export default {
  components: {
    
  },
  props: {},
  data() {
    return {
     
      myChart5: null,
      placeHoledStyle5: {},
      dataStyle5: {},
      option5: {},
      data: [],
    };
  },
  watch: {},
  computed: {},
  methods: {
     threer(){
      this.myChart5 = echarts.init(document.getElementById("threer"));
      this.placeHoledStyle5 = {
        normal: {
          barBorderColor: "rgba(0,0,0,0)",
          color: "rgba(0,0,0,0)"
        },
        emphasis: {
          barBorderColor: "rgba(0,0,0,0)",
          color: "rgba(0,0,0,0)"
        }
      };
      this.dataStyle5 = {
        normal: {
          label: {
            show: true,
            position: "insideLeft",
            formatter: "{c}"
          }
        }
      };

      this.option5 = {
        backgroundColor: "rgba(0,0,0,0)",
        title: {
          text: "游览类型",
 textStyle: {
            color: "#fff",
            font: "10px Microsoft YaHei",
            fontWeight:'normal',
          },
          x: "center",
          y: "3%"
        },

        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
  legend: {
          type: "",
          orient: "horizontal",
          // x: "right",
          top: "90%",
          left: "30%",
          // bottom: "0%",
          itemWidth: 13,
          itemHeight: 8,
          itemGap: 16,
          textStyle: {
            color: "#A3E2F4",
            fontSize: 13,
            fontWeight: 0
          },
          data: ["文化", "采摘", "农家乐", "户外活动"]
        },
        visualMap: {
          show: false,
          min: 500,
          max: 600,
          inRange: {
            //colorLightness: [0, 1]
          }
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "50%",
            center: ["50%", "43%"],
            color: ["rgb(131,249,103)", "#FBFE27", "#FE5050", "#1DB7E5"], //'#FBFE27','rgb(11,228,96)','#FE5050'
            data: [
              {
                value: 285,
                name: "文化"
              },
              {
                value: 410,
                name: "采摘"
              },
              {
                value: 274,
                name: "农家乐"
              },
              {
                value: 235,
                name: "户外活动"
              }
            ].sort(function(a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",

            label: {
              normal: {
                formatter: ["{d|{d}%}", "{b|{b}}"].join("\n"),
                rich: {
                  d: {
                    color: "rgb(241,246,104)",
                    fontSize: 18,
                    fontWeight: "bold",
                    lineHeight: 5
                  },
                  b: {
                    color: "rgb(98,137,169)",
                    fontSize: 15,
                    height: 40
                  }
                }
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: "rgb(98,137,169)"
                },
                smooth: 0.2,
                length: 1,
                length2: 10
              }
            },
            itemStyle: {
              normal: {
                shadowColor: "rgba(0, 0, 0, 0.8)",
                shadowBlur: 50
              }
            }
          }
        ]
      };

      this.myChart5.setOption(this.option5);
      window.addEventListener("resize", () => {
        this.myChart5.resize();
      });
    },
  },
  created() {},
  mounted() {
     this.$nextTick(function() {
      // 需要修改 twotwo
      this.threer();
    });
  }
};
</script>
<style lang="scss">
.xs-echarts-threer{
  height: 400px;
  width: 100%;
}
</style>